perf: Do not run react compiler needlessly #75676

kdy1 · 2025-02-05T08:48:19Z

What?

Do not run react compiler for files in node_modules.
When the react compiler is not enabled, just disable babel.

Why?

We were stripping TypeScript and JSX using babel when the React Compiler is enabled. We don't have to, and we should not.

Closes PACK-3976

kdy1 · 2025-02-05T08:48:37Z

perf: Check file using SWC before applying React Compiler #75605
perf: Do not run react compiler needlessly #75676 👈 (View in Graphite)
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

ijjk · 2025-02-05T09:00:32Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
buildDuration	21.7s	19.5s	N/A
buildDurationCached	18.9s	16.4s	N/A
nodeModulesSize	393 MB	393 MB	⚠️ +3.07 kB
nextStartRea..uration (ms)	489ms	489ms	✓

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
5306-HASH.js gzip	55 kB	55 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.46 kB	5.47 kB	N/A
bccd1874-HASH.js gzip	53 kB	53 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	245 B	245 B	✓
main-HASH.js gzip	34.7 kB	34.7 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	245 B	245 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.59 kB	4.59 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.35 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
_buildManifest.js gzip	748 B	748 B	✓
Overall change	748 B	748 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
index.html gzip	523 B	523 B	✓
link.html gzip	538 B	538 B	✓
withRouter.html gzip	520 B	520 B	✓
Overall change	1.58 kB	1.58 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
edge-ssr.js gzip	130 kB	130 kB	N/A
page.js gzip	211 kB	211 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
middleware-b..fest.js gzip	675 B	669 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.3 kB	31.3 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
app-page-exp...dev.js gzip	394 kB	394 kB	✓
app-page-exp..prod.js gzip	132 kB	132 kB	✓
app-page-tur..prod.js gzip	145 kB	145 kB	✓
app-page-tur..prod.js gzip	141 kB	141 kB	✓
app-page.run...dev.js gzip	382 kB	382 kB	✓
app-page.run..prod.js gzip	129 kB	129 kB	✓
app-route-ex...dev.js gzip	39.3 kB	39.3 kB	✓
app-route-ex..prod.js gzip	25.7 kB	25.7 kB	✓
app-route-tu..prod.js gzip	25.7 kB	25.7 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	40.9 kB	40.9 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
dist_client_...dev.js gzip	356 B	356 B	✓
dist_client_...dev.js gzip	349 B	349 B	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.8 kB	11.8 kB	✓
pages-api.ru..prod.js gzip	9.69 kB	9.69 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	31.6 kB	31.6 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	61.1 kB	61.1 kB	✓
Overall change	1.67 MB	1.67 MB	✓

build cache

	vercel/next.js canary	vercel/next.js kdy1/react-compiler-iff	Change
0.pack gzip	2.11 MB	2.11 MB	N/A
index.pack gzip	76 kB	75.9 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for main-HASH.js

Diff too large to display

Commit: 7e21164

packages/next/src/build/babel/loader/get-config.ts

ijjk · 2025-02-05T09:05:17Z

Failing test suites

Commit: 7e21164

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/development/app-dir/dev-fetch-hmr/dev-fetch-hmr.test.ts (PPR)

dev-fetch-hmr > should retain module level fetch patching

Expand output

● dev-fetch-hmr › should retain module level fetch patching

thrown: "Exceeded timeout of 120000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  252 |   let next: NextInstance | undefined
  253 |   if (!skipped) {
> 254 |     beforeAll(async () => {
      |     ^
  255 |       next = await createNext(options)
  256 |     })
  257 |     afterAll(async () => {

  at beforeAll (lib/e2e-utils/index.ts:254:5)
  at development/app-dir/dev-fetch-hmr/dev-fetch-hmr.test.ts:7:33
  at Object.describe (development/app-dir/dev-fetch-hmr/dev-fetch-hmr.test.ts:6:1)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/socket-io/index.test.js (PPR)

socket-io > should support socket.io without falling back to polling

Expand output

● socket-io › should support socket.io without falling back to polling

TIMED OUT: /hello world/



undefined

  731 |
  732 |   if (hardError) {
> 733 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  734 |   }
  735 |   return false
  736 | }

  at check (lib/next-test-utils.ts:733:11)
  at Object.<anonymous> (e2e/socket-io/index.test.js:31:5)

Read more about building and testing Next.js in contributing.md.

packages/next/src/build/babel/loader/transform.ts

packages/next/src/build/babel/loader/get-config.ts

huozhi · 2025-02-17T12:02:03Z

packages/next/src/build/babel/loader/get-config.ts

@@ -325,6 +329,10 @@ function getFreshConfig(
  }

  if (loaderOptions.transformMode === 'standalone') {
+    if (!reactCompilerPluginsIfEnabled.length) {


will this affect other user customized config? if we can have a test to demostrate the change would be great

It will not be affected because of if (loaderOptions.transformMode === 'standalone')

Upgrade compiler playground to use the newest nextjs release, which includes react compiler transform pipeline optimizations vercel/next.js#75676. Also made a drive-by fix to avoid the error `Cannot update a component ('Router') while rendering a different component ('StoreProvider'). To locate the bad setState() call inside 'StoreProvider', follow the stack trace as described in https://react.dev/link/setstate-in-render`. The bad setState came from `history.replaceState({}, '', `#${hash}`);`. Prior to this, playground ran side effects in a reducer (i.e. during render). These have now been moved an effect.

Upgrade compiler playground to use the newest nextjs release, which includes react compiler transform pipeline optimizations vercel/next.js#75676. Also made a drive-by fix to avoid the error `Cannot update a component ('Router') while rendering a different component ('StoreProvider'). To locate the bad setState() call inside 'StoreProvider', follow the stack trace as described in https://react.dev/link/setstate-in-render`. The bad setState came from `history.replaceState({}, '', \`#${hash}\`);`. Prior to this, playground ran side effects in a reducer (i.e. during render). These have now been moved an effect.

ijjk added created-by: Turbopack team PRs by the Turbopack team. type: next labels Feb 5, 2025

kdy1 mentioned this pull request Feb 5, 2025

perf: Check file using SWC before applying React Compiler #75605

Draft

kdy1 changed the title ~~Do not run react compioler for files in node modules~~ perf: Do not run react compiler needlessly Feb 5, 2025

kdy1 requested a review from timneutkens February 5, 2025 08:50

kdy1 marked this pull request as ready for review February 5, 2025 08:50

kdy1 requested a review from sokra February 5, 2025 08:50

timneutkens reviewed Feb 5, 2025

View reviewed changes

packages/next/src/build/babel/loader/get-config.ts Outdated Show resolved Hide resolved

kdy1 marked this pull request as draft February 5, 2025 09:11

kdy1 requested a review from timneutkens February 5, 2025 09:18

kdy1 marked this pull request as ready for review February 5, 2025 09:18

timneutkens reviewed Feb 5, 2025

View reviewed changes

packages/next/src/build/babel/loader/transform.ts Show resolved Hide resolved

huozhi reviewed Feb 5, 2025

View reviewed changes

packages/next/src/build/babel/loader/get-config.ts Outdated Show resolved Hide resolved

kdy1 added 4 commits February 12, 2025 16:09

Do not run react compioler for files in node modules

c034f4a

Disable babel if not required

d302a5d

review

df5c622

regex

7e21164

kdy1 force-pushed the kdy1/react-compiler-iff branch from 423a9cb to 7e21164 Compare February 12, 2025 07:09

kdy1 requested review from timneutkens and huozhi February 12, 2025 07:09

kdy1 enabled auto-merge (squash) February 12, 2025 07:09

timneutkens approved these changes Feb 17, 2025

View reviewed changes

huozhi reviewed Feb 17, 2025

View reviewed changes

huozhi approved these changes Feb 17, 2025

View reviewed changes

kdy1 merged commit c9ef4bd into canary Feb 17, 2025
131 checks passed

kdy1 deleted the kdy1/react-compiler-iff branch February 17, 2025 12:07

mofeiZ mentioned this pull request Feb 19, 2025

[compiler][playground] Upgrade to Next 15.2.0-canary.64 facebook/react#32428

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf: Do not run react compiler needlessly #75676

perf: Do not run react compiler needlessly #75676

kdy1 commented Feb 5, 2025 •

edited by padmaia

Loading

kdy1 commented Feb 5, 2025 •

edited

Loading

ijjk commented Feb 5, 2025 •

edited

Loading

ijjk commented Feb 5, 2025 •

edited

Loading

huozhi Feb 17, 2025

kdy1 Feb 17, 2025

perf: Do not run react compiler needlessly #75676

perf: Do not run react compiler needlessly #75676

Conversation

kdy1 commented Feb 5, 2025 • edited by padmaia Loading

What?

Why?

kdy1 commented Feb 5, 2025 • edited Loading

ijjk commented Feb 5, 2025 • edited Loading

Stats from current PR

ijjk commented Feb 5, 2025 • edited Loading

Failing test suites

huozhi Feb 17, 2025

Choose a reason for hiding this comment

kdy1 Feb 17, 2025

Choose a reason for hiding this comment

kdy1 commented Feb 5, 2025 •

edited by padmaia

Loading

kdy1 commented Feb 5, 2025 •

edited

Loading

ijjk commented Feb 5, 2025 •

edited

Loading

ijjk commented Feb 5, 2025 •

edited

Loading